<script setup>
import { ref, defineProps } from 'vue';
import { ElMessage } from 'element-plus';

const props = defineProps({
  addTodo: {
    type: Function,
  }
});

const newTodo = ref('');

const addTodo = () => {
  if (newTodo.value.trim() === '') {
    ElMessage.error('输入框不能为空');
    // console.log(1);
  } else {
    const done = ref(false);
    props.addTodo(newTodo.value, done);
    newTodo.value = '';
  }
}
</script>

<template>

  <!-- 标题 -->
  <h2>待办事项列表</h2>

  <!-- 添加新待办事项的输入框和按钮 -->
  <div class="todo-input-container">
    <input v-model="newTodo" placeholder="添加一个事项" class="todo-input" @keyup.enter="addTodo" />
    <el-button @click="addTodo" type="primary" class="add-btn">添加</el-button>
  </div>

</template>

<style scoped>
h2 {
  margin: 10px 0;
  font-size: larger;
  font-weight: 800;
  color: #409eff;
}

/* 输入框容器样式 */
.todo-input-container {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding: 8px;
  border-radius: 4px;

}

/* 输入框样式 */
.todo-input {
  flex: 1;
  padding: 6px;
  border-radius: 4px;
  margin-right: 8px;
  width: 200px;
  /* 调整输入框宽度 */
}

/* 添加按钮样式 */
.add-btn {
  padding: 6px 12px;
  background-color: #409eff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>
